<template>
  <div class="video">
    <video :src="src" :width="width" :autoplay="autoplay"
      ref="video" preload :poster="poster" @click="pause">

    </video>
    <div class="play" @click="play" v-if="!playing"></div>
  </div>
</template>
<script>
export default {
  name: 'videoPlayer',
  data() {
    return {
      playing: false
    }
  },
  props: {
    src: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    poster: {
      type: String,
      default: ''
    },
    autoplay: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    play() {
      const video = this.$refs.video
      video.play()
      this.playing = true
    },
    pause() {
      this.$refs.video.pause()
      this.playing = false
    }
  }
}
</script>
